<template>
  <div class="login-container">
    <el-card class="login-card" shadow="hover">
      <div class="login-header">
        <h3>系统登录</h3>
      </div>
      <el-form ref="form" :model="form" label-width="40px" class="login-form">
        <el-form-item label="角色">
          <el-select
            v-model="form.role"
            placeholder="请选择角色"
            class="full-width-input"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="账号">
          <el-input v-model="form.username" placeholder="请输入账号" clearable>
            <template #prefix>
              <i class="el-icon-user" />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
            @keyup.enter="onclickLogin"
          >
            <template #prefix>
              <i class="el-icon-lock" />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item class="form-actions">
          <div class="remember-me">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <div class="login-buttons">
            <el-button type="primary" @click="onclickLogin" class="login-btn">
              登录
            </el-button>
            <el-button
              type="text"
              @click="onclickRegister"
              class="register-btn"
            >
              注册账号
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "UserLogin",
  data() {
    return {
      form: {
        username: "username",
        password: "123456",
        role: null,
      },
      checked: true,
      options: [
        {
          value: 1,
          label: "生产商",
        },
        {
          value: 2,
          label: "中间商",
        },
        {
          value: 3,
          label: "销售商",
        },
        {
          value: 4,
          label: "管理员",
        },
      ],
    };
  },
  methods: {
    onclickLogin() {
      if (!this.form.role) {
        this.$message.warning("请选择角色");
        return;
      }
      // 进入主页
      console.log("进入主页");
       this.$router.push('/home')
    },
    onclickRegister() {
      // 进入注册页面
      console.log("进入注册页面");
      this.$router.push('/register')
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  background-image: linear-gradient(120deg, #f6f7f9 0%, #e9ebee 100%);
}

.login-card {
  width: 420px;
  padding: 30px 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h3 {
  color: #303133;
  font-size: 22px;
  font-weight: 500;
}

.login-form {
  margin-top: 20px;
}

.full-width-input {
  width: 100%;
}

.form-actions {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.remember-me {
  margin-bottom: 15px;
}

.login-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-btn {
  width: 48%;
  height: 40px;
  font-size: 16px;
}

.register-btn {
  width: 48%;
  height: 40px;
  font-size: 16px;
  border: 1px solid #409eff;
  color: #409eff;
}

.register-btn:hover {
  color: #fff;
  background-color: #409eff;
}

.el-icon-user,
.el-icon-lock {
  color: #c0c4cc;
  margin-left: 5px;
}
</style>
